<!--
 * @Description: 父级物料
 * @Autor: 商晓彬
 * @Date: 2021-06-23 12:09:31
 * @LastEditors: 商晓彬
 * @LastEditTime: 2021-12-13 09:27:34
-->
<div bsModal #createOrEditModal="bs-modal" (onShown)="onShown()" class="parent modal fade" tabindex="-1" role="dialog"
    aria-labelledby="createOrEditModal" aria-hidden="true" [config]="{backdrop: 'static', keyboard: !saving}">
    <div style="width:1880px!important;margin: 1.75rem auto;">
        <div class="modal-content">
            <form style="height: 800px!important;overflow: auto;" *ngIf="active" #bopForm="ngForm" novalidate
                (ngSubmit)="save()" autocomplete="off">
                <div class="modal-header">
                    <h4 class="modal-title">
                        <span>{{title}}</span>
                    </h4>
                    <button type="button" class="close" (click)="close()" [attr.aria-label]="l('Close')"
                        [disabled]="saving">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <button style="margin-left: 20px;" pButton type="button" label="创建发次"
                            (click)="add()"></button>
                    </div>
                    <div class="row align-items-center" style="margin-top: 25px;">
                        <div class="primeng-datatable-container">
                            <p-table #dataTable [value]="primengTableHelper.records" (onLazyLoad)="getTableList($event)"
                                rows="{{primengTableHelper.defaultRecordsCountPerPage}}" [paginator]="false"
                                [lazy]="true" [scrollable]="true" ScrollWidth="100%"
                                [responsive]="primengTableHelper.isResponsive"
                                [resizableColumns]="primengTableHelper.resizableColumns">
                                <ng-template pTemplate="header">
                                    <tr>
                                        <th style="width: 80px">操作</th>
                                        <th style="width: 50px">序号</th>
                                        <th style="width: 150px">图号</th>
                                        <th style="width: 150px">物料名称</th>
                                        <th style="width: 150px">规格型号</th>
                                        <th style="width: 150px">属性</th>
                                        <th style="width: 150px">发次</th>
                                    </tr>
                                </ng-template>
                                <ng-template pTemplate="body" let-record="$implicit" let-rowIndex="rowIndex">
                                    <tr>
                                        <td style="width: 80px">
                                            <button pButton type="button" label="选择" (click)="choose(record)"></button>
                                        </td>
                                        <td style="width: 50px">{{rowIndex+1}}</td>
                                        <td style="width: 150px">{{record.materialNo}}</td>
                                        <td style="width: 150px">{{record.materialName}}</td>
                                        <td style="width: 150px">{{record.model}}</td>
                                        <td style="width: 150px">{{getAttribute(record.attribute)}}</td>
                                        <td style="width: 150px">{{record.sendTime}}</td>
                                    </tr>
                                </ng-template>
                            </p-table>
                            <div class="primeng-paging-container">
                                <p-paginator [rows]="primengTableHelper.defaultRecordsCountPerPage" #paginator
                                    (onPageChange)="getTableList($event)"
                                    [totalRecords]="primengTableHelper.totalRecordsCount"
                                    [rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage">
                                </p-paginator>
                                <span class="total-records-count">
                                    {{'TotalRecordsCount' | localize:primengTableHelper.totalRecordsCount}}
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 新增弹窗 -->
                <p-dialog class="dialog" draggable=false header="新增" [(visible)]="addFlag"
                    [style]="{width: '800px', height: '500px'}" [baseZIndex]="1000">
                    <div class="modal-body" *ngIf="addFlag">
                        <div class="form-group" style="display: flex;">
                            <label for="materialCode" style="margin-top: 7px;">物料图号*</label>
                            <input name="addmaterialCode" style="width: 200px;margin-left: 10px;" id="addmaterialCode"
                                #materialCodeInput="ngModel" type="text" class="form-control"
                                [(ngModel)]="addForm.materialCode" maxlength="256" required />
                            <validation-messages [formCtrl]="materialCodeInput"></validation-messages>
                            <label for="materialname" style="margin-top: 7px;margin-left: 100px;">物料名称*</label>
                            <input name="addmaterialname" style="width: 200px;margin-left: 10px;" id="addmaterialname"
                                #materialnameInput="ngModel" type="text" class="form-control"
                                [(ngModel)]="addForm.materialname" maxlength="256" required />
                            <validation-messages [formCtrl]="materialnameInput"></validation-messages>
                        </div>
                        <div class="form-group" style="display: flex;">
                            <label for="materialProperties" style="margin-top: 7px;margin-right: 10px;">物料属性*</label>
                            <p-dropdown required name="addmaterialProperties" #materialPropertiesSelect="ngModel"
                                [options]="materialPropertiesOption" [(ngModel)]="addForm.materialProperties">
                                <ng-template let-select pTemplate="selectedItem">
                                    <span
                                        style="vertical-align:middle; margin-left: .5em;width:175px;">{{select.label}}</span>
                                </ng-template>
                                <ng-template let-select pTemplate="select">
                                    <div class="ui-helper-clearfix" style="position: relative;height: 25px;">
                                        <div style="font-size:14px;float:right;margin-top:4px;width: 175px;">
                                            {{select.label}}</div>
                                    </div>
                                </ng-template>
                            </p-dropdown>
                            <validation-messages [formCtrl]="materialPropertiesSelect"></validation-messages>
                            <label for="model" style="margin-top: 7px;margin-left: 100px;margin-right: 10px;">规格型号*</label>
                            <p-dropdown required name="addModel" #materialModelInput="ngModel"
                                [options]="modelOptions" [(ngModel)]="addForm.materialModel" (onChange)="onChange($event)">
                            <ng-template let-select pTemplate="selectedItem">
                                <span
                                        style="vertical-align:middle; margin-left: .5em;width:175px;">{{select.label}}</span>
                            </ng-template>
                            <ng-template let-select pTemplate="select">
                                <div class="ui-helper-clearfix" style="position: relative;height: 25px;">
                                    <div style="font-size:14px;float:right;margin-top:4px;width: 175px;">
                                        {{select.label}}</div>
                                </div>
                            </ng-template>
                            </p-dropdown>
                            <validation-messages [formCtrl]="materialModelInput"></validation-messages>
                        </div>
                        <div class="form-group" style="display: flex;">
                            <label for="materialType" style="margin-top: 7px;margin-right: 10px;width: 63.72px;">发次*</label>
                            <p-dropdown required name="sendTime" #sendTimeInput="ngModel"
                                [options]="sendTimeOptions" [(ngModel)]="addForm.sendTime">
                            <ng-template let-select pTemplate="selectedItem">
                                <span
                                        style="vertical-align:middle; margin-left: .5em;width:175px;">{{select.label}}</span>
                            </ng-template>
                            <ng-template let-select pTemplate="select">
                                <div class="ui-helper-clearfix" style="position: relative;height: 25px;">
                                    <div style="font-size:14px;float:right;margin-top:4px;width: 175px;">
                                        {{select.label}}</div>
                                </div>
                            </ng-template>
                            </p-dropdown>
                            <validation-messages [formCtrl]="sendTimeInput"></validation-messages>
                            <label style="margin-top: 5px; margin-left: 100px;" for="isUsed">是否启用*</label>
                            <p-toggleButton name="isUsed" style="margin-left: 10px" [(ngModel)]="addForm.isUsed"
                                onLabel="启用" offLabel="停用" onIcon="pi pi-check" offIcon="pi pi-times"
                                [style]="{'width':'150px'}">
                            </p-toggleButton>
                        </div>
                        <div class="form-group">
                            <label for="remark">备注</label>
                            <input style="margin-left: 10px;" id="remark" type="text" name="remark" class="form-control"
                                [(ngModel)]="addForm.remark" maxlength="256" />
                        </div>
                    </div>
                    <div class="modal-footer" style="margin-top: 14px;">
                        <button [disabled]="!bopForm.form.valid" style="margin-left: 20px;" pButton type="button" label="提交"
                            (click)="addSave()"></button>
                    </div>
                </p-dialog>
            </form>
        </div>
    </div>
</div>